<template>
  <body>
    <div class="addSchedule">
      <el-row>
        <el-col>
          <div class="schedule">
            <el-form>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">教学进度计划名称</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" v-model="schedulePlan" placeholder="请输入教学进度计划名称"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">来源</span>
                  </el-col>
                  <el-col :span="19">
                    <template>
                      <el-radio size="mini" v-model="radio" label="1" @click.native="display">教学进度模板</el-radio>
                      <el-radio size="mini" v-model="radio" label="2" @click.native="hide">教学进度计划</el-radio>
                    </template>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span" v-if="show">教学进度模板</span>
                    <span class="span" v-if="isshow">教学进度计划</span>
                  </el-col>
                  <el-col :span="19">
                    <div>
                      <el-select size="mini" v-model="teaching" slot="prepend" placeholder="请选择">
                        <el-option label="图形化编程" value="1"></el-option>
                        <el-option label="PHP" value="2"></el-option>
                        <el-option label="Java" value="3"></el-option>
                        <el-option label="C++" value="4"></el-option>
                        <el-option label="JavaSciipt" value="5"></el-option>
                        <el-option label="Python" value="6"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">所属班级</span>
                  </el-col>
                  <el-col :span="19">
                    <div>
                      <el-select size="mini" v-model="subordinateClass" slot="prepend" placeholder="请选择所属班级">
                        <el-option label="图形化编程" value="1"></el-option>
                        <el-option label="PHP" value="2"></el-option>
                        <el-option label="Java" value="3"></el-option>
                        <el-option label="C++" value="4"></el-option>
                        <el-option label="JavaSciipt" value="5"></el-option>
                        <el-option label="Python" value="6"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">所属学期</span>
                  </el-col>
                  <el-col :span="19">
                    <div>
                      <el-select size="mini" v-model="semester" slot="prepend" placeholder="请选择所属学期">
                        <el-option label="图形化编程" value="1"></el-option>
                        <el-option label="PHP" value="2"></el-option>
                        <el-option label="Java" value="3"></el-option>
                        <el-option label="C++" value="4"></el-option>
                        <el-option label="JavaSciipt" value="5"></el-option>
                        <el-option label="Python" value="6"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">说明</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" type="textarea" :autosize="{ minRows: 1.5, maxRows: 4}" placeholder="请输入教学进度计划范围说明" v-model="explain"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">掌握编码能力</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" type="textarea" :autosize="{ minRows: 1.5, maxRows: 4}" placeholder="请输入掌握编码能力,该项会在生成学习报告时用到,请务必填写" v-model="ability"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">课程项目类型</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" type="textarea" :autosize="{ minRows: 1.5, maxRows: 4}" placeholder="请输入课程项目类型,该项会在生成学习报告时用到,请务必填写" v-model="projectType"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">学科帮助</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" type="textarea" :autosize="{ minRows: 1.5, maxRows: 4}" placeholder="请输入学科帮助,该项会在生成学习报告时用到,请务必填写" v-model="help"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">持续时间</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" v-model="duration" placeholder="请输入持续时间"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="3">
                    <span class="span">教学时间</span>
                  </el-col>
                  <el-col :span="19">
                    <div class="block">
                      <el-date-picker
                      size="mini"
                      v-model="start"
                      type="date"
                      placeholder="选择日期">
                      </el-date-picker>
                    </div>
                    <div class="block">
                      <el-date-picker
                      size="mini"
                      v-model="end"
                      type="date"
                      placeholder="选择日期">
                      </el-date-picker>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="5">
                     <el-button type="primary" size="mini">生成模板</el-button>
                     <el-button plain size="mini">取消</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </body>
</template>

<script>
export default {
  data () {
    return {
      schedulePlan: '',
      radio: '1',
      show: true,
      isshow: false,
      teaching: '',
      subordinateClass: '',
      semester: '',
      explain: '',
      ability: '',
      projectType: '',
      help: '',
      duration: '',
      start: '',
      end: ''
    }
  },
  components: {

  },
  methods: {
    display () {
      this.show = true
      this.isshow = false
    },
    hide () {
      this.show = false
      this.isshow = true
    }
  }
}
</script>

<style scoped="scoped">
  @import url("../assets/css/addSchedule.css");
</style>
